import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

import TweenOne from 'rc-tween-one';

import { Row, Col, Radio, Dropdown, Menu, message, Icon, Button } from 'antd';

function TableHandle({ style, status, selectedRows, radioGroups, menuItems, action, onToggleTable, onMenuClick }) {

  const menu = (
    <Menu onClick={onMenuClick} selectedKeys={[]}>
      {
        Object.keys(menuItems).map(key=><Menu.Item key={key}>{menuItems[key]}</Menu.Item>)
      }
    </Menu>
  );

  return (
    <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{marginBottom: 16, ...style}}>
      <TweenOne
        key="1"
        delay={500}
        animation={{ x: -50, type: 'from', ease: 'easeOutQuad' }}
        md={12} 
        sm={24}
        component={Col}
      >
        <Radio.Group value={String(status)} onChange={onToggleTable} key="radioGroups">
          {
            Object.keys(radioGroups).reverse().map(key=><Radio.Button value={key} key={key}>{radioGroups[key]}</Radio.Button>)
          }
        </Radio.Group>
      </TweenOne>
      <TweenOne
        key="2"
        delay={500}
        animation={{ x: 50, type: 'from', ease: 'easeOutQuad' }}
        md={12} 
        sm={24}
        component={Col}
        style={{textAlign: 'right'}}
      >
        {selectedRows.length > 0 && (
          <span key="selectedRows">
            {/*<Button onClick={() => message.error('预留的')}>批量操作</Button>*/}
            <Dropdown overlay={menu}>
              <Button style={{marginRight: 8, marginLeft: 8}}>
                更多操作 <Icon type="down" />
              </Button>
            </Dropdown>
          </span>
        )}
        <span key="action">{action}</span>
      </TweenOne>
    </Row>
  );
};

TableHandle.propTypes = {
  style: PropTypes.object,
  status: PropTypes.string,
  selectedRows: PropTypes.array,
  radioGroups: PropTypes.object,
  menuItems: PropTypes.object,
  action: PropTypes.object,
  onToggleTable: PropTypes.func,
  onMenuClick: PropTypes.func,
};

TableHandle.defaultProps = {
  style: {},
  status: 'all',
  selectedRows: [],
  radioGroups: {},
  menuItems: {},
  action: null,
  onToggleTable() {},
  onMenuClick() {},
};

export default TableHandle;